<template>
  <div id="app">
    <Tabbar></Tabbar>
    <Header></Header>
    <router-view/>
    <Footer></Footer>
    <Login v-show="isshowLoginModel"></Login>
    <!-- 提示组件 -->
    <transition name="slide">
       <Toast v-show="isshowToast"/>
    </transition>
   
  </div>
</template>
<script>
import Tabbar from "./components/Tabbar.vue"
import Header from "./components/Header.vue"
import Footer from "./components/Footer.vue"
import {jingpinAPI} from "./request/index"
import Login from "./components/Login.vue"
import Toast from "./components/Toast.vue"
import { mapState } from 'vuex'

export default {
  components:{
    Tabbar,
    Header,
    Footer,
    Login,
    Toast
  },
  computed:{
    ...mapState({
      isshowLoginModel:state=>state.showModel.isshowLoginModel,
       isshowToast:state=>state.showToast.isshowToast
    })
  },
  async created(){
    let res=await jingpinAPI();
    console.log("res",res);
  }
}
</script>
<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
